<template>
  <div id="payment" class="w-full h-full payment">
    <div class="flex flex-col w-full h-full">
      <assets-head class="w-full" :title="$t('C2C收款方式')" ref="orderNav" :backFunc="() => $router.push('/wantBuy')" />

      <div class="payment_content w-full flex-1 bg-white">
        <car-item class="pb-60" v-for="(item, index) in items" :item="item" :key="index" :index="index" />
      </div>
      <div ref="add" class="add w-full mainBackground flex justify-center pt-44 pb-100">
        <van-button type="info" @click="enterPaymentMethod" class="w-748">{{ $t('添加收款方式') }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState,
} from "vuex";
import { Button, Toast } from 'vant';
import assetsHead from "@/components/assets-head";
import CarItem from "@/page/placeAnOrder/page/payment-method/CarItem";
import otcApi from "@/API/otc.js";
import {
  SET_NAV_HEIGHT,
} from "@/store/const.store";

export default {
  name: "Payment",
  data() {
    return {
      footerHeight: 0,
      items: [
        // {
        //   title: this.$t('银行卡'),
        //   number: "4367421420489044633",
        //   name: "James",
        //   bankName:  this.$t('中国农业银行'),
        //   desc:  this.$t('北京朝阳路支行'),
        //   type: 'CN'
        // },
        // {
        //   title: "AI-Rafidain QiServices",
        //   number: "4367421420489044633",
        //   phone: "13146872211",
        //   name: "James",
        //   desc: "Supplementary card",
        //   type: 'EN'
        // },
      ]
    }
  },
  created() {
    this.getPaymentMethods();
  },
  mounted() {
    console.log(this.items);
    // 获取导航高度
    const height = this.$refs.orderNav.$el.getBoundingClientRect().height;
    this.$store.commit(`payment/${SET_NAV_HEIGHT}`, {
      height,
    })
    // 获取底部高度
    this.footerHeight = this.$refs.add.getBoundingClientRect().height;
  },
  methods: {
    getPaymentMethods() {
      Toast.loading()
      otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then(res => {
        Toast.clear()
        this.items = res.data;
      })
    },
    // 进入添加收款方式
    enterPaymentMethod() {
      this.$router.push({
        path: '/wantBuy/addPaymentMethod'
      })
    }
  },
  components: {
    [Button.name]: Button,
    assetsHead,
    CarItem,
  },
  computed: {
    ...mapState("payment", ["navHeight"])
  }
}
</script>

<style lang="scss" scoped>
.payment {
  box-sizing: border-box;

  ::v-deep .van-button {
    border-radius: 10px;
  }
}

.payment_content {
  overflow-y: scroll;

  @include themify() {
    background: themed("tab_background");
  }

  //.payment_content {
  //  padding: 0 30px;
  //}
}

::v-deep .van-button--info {
  @include themify() {
    background: themed("btn_main");
  }

  @include themify() {
    border-color: themed("btn_main");
  }
}
</style>
